import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/checkpoint/user_card.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/checkpoint/actions.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/checkpoint/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointPrepareGameGridViewWidget extends StatefulWidget {
  final List<CardList> data;
  CheckpointPrepareGameGridViewWidget({Key key, this.data}) : super(key: key);

  _CheckpointPrepareGameGridViewWidgetState createState() =>
      _CheckpointPrepareGameGridViewWidgetState();
}

class _CheckpointPrepareGameGridViewWidgetState
    extends State<CheckpointPrepareGameGridViewWidget> {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(
          state: store.state,
          yeXiuStateViewModel: YeXiuStateViewModel(
              checkpointStateViewModel:
                  CheckpointStateViewModel(selectFun: (map) {
            pushSelectMap(store, map);
          }, updateSelectKeyFun: (nextSelect) {
            updateSelectKey(store, nextSelect);
          })));
    }, builder: (context, vm) {
      var selectKey = vm.state.yeXiuState.checkpointState.selectKey;
      var selectMap = vm.state.yeXiuState.checkpointState.selectMap;
      return Container(
        height: setRatio(129),
        width: setRatio(375),
        child: GridView.builder(
            padding: EdgeInsets.only(
                left: setRatio(16),
                right: setRatio(16),
                top: setRatio(15),
                bottom: setRatio(10)),
            scrollDirection: Axis.horizontal,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                mainAxisSpacing: setRatio(10),
                crossAxisCount: 1,
                childAspectRatio: 103 / 70),
            itemCount: widget.data?.length,
            itemBuilder: (context, index) {
              var item = widget.data[index];
              return GestureDetector(
                onTap: () {
                  if (selectMap[selectKey] == null &&
                      !selectMap.containsValue(item?.card?.cardId)) {
                    vm.yeXiuStateViewModel.checkpointStateViewModel
                        .selectFun({selectKey: item?.card?.cardId});
                    //确定下一个选择框 map遍历顺序不可控 采用0..4 索引
                    int nextSelect = 0;
                    for (var i = 0; i < 4; i++) {
                      if (selectMap[i] == null) {
                        nextSelect = i;
                        break;
                      }
                    }
                    vm.yeXiuStateViewModel.checkpointStateViewModel
                        .updateSelectKeyFun(nextSelect);
                  }
                },
                child: Stack(
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          width: setRatio(70),
                          height: setRatio(70),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(setRatio(2)),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      item?.card?.picUrlSmall ?? ''))),
                          child: Stack(
                            children: <Widget>[
                              Positioned(
                                bottom: 0,
                                right: 0,
                                child: Container(
                                  width: setRatio(30),
                                  height: setRatio(13),
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(setRatio(2)),
                                          bottomRight:
                                              Radius.circular(setRatio(2))),
                                      color: Color(0xbF000000)),
                                  child: Center(
                                    child: Text(
                                      'Lv.${item?.cardLevel?.level ?? 0}',
                                      style: TextStyle(
                                          color: Color(0xFFFFFFFF),
                                          fontFamily: FontFamily.PMZD,
                                          fontSize: setTextSp(9)),
                                    ),
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          width: setRatio(70),
                          height: setRatio(15),
                          margin: EdgeInsets.only(top: setRatio(4)),
                          decoration: BoxDecoration(
                              color: Color(0x7F000000),
                              borderRadius: BorderRadius.circular(setRatio(2))),
                          child: Center(
                            child: Text(
                              '${item?.card?.professionName ?? ''}·${item?.card?.name ?? ''}',
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                  color: Color(0xFFEFF0F8),
                                  fontFamily: FontFamily.PINGFANG,
                                  fontWeight: FontWeightCustom.PF_Medium,
                                  fontSize: setTextSp(10)),
                            ),
                          ),
                        ),
                        Container(
                          width: setRatio(70),
                          margin: EdgeInsets.only(top: setRatio(1)),
                          child: Center(
                            child: Text.rich(TextSpan(
                                style: TextStyle(
                                    color: Color(0xFFFFFFFF),
                                    fontFamily: FontFamily.PINGFANG,
                                    fontWeight: FontWeightCustom.PF_Medium,
                                    fontSize: setTextSp(10)),
                                children: [
                                  TextSpan(text: '战斗力'),
                                  TextSpan(
                                      text: '${item?.fightingCapacity ?? 0}',
                                      style:
                                          TextStyle(color: Color(0xFFFFBF13)))
                                ])),
                          ),
                        )
                      ],
                    ),
                    selectMap.containsValue(item?.card?.cardId)
                        ? Positioned(
                            top: 0,
                            bottom: 0,
                            left: 0,
                            right: 0,
                            child: Container(
                              color: Color(0x5F000000),
                              child: Stack(
                                children: <Widget>[
                                  Positioned(
                                    top: setRatio(26),
                                    left: setRatio(15),
                                    child: Container(
                                      width: setRatio(40),
                                      height: setRatio(16),
                                      decoration: BoxDecoration(
                                          color: Color(0xFFFF4C4C),
                                          borderRadius: BorderRadius.circular(
                                              setRatio(3))),
                                      child: Center(
                                        child: Text(
                                          '已出战',
                                          style: TextStyle(
                                              color: Color(0xFFFFFFFF),
                                              fontFamily: FontFamily.PINGFANG,
                                              fontWeight:
                                                  FontWeightCustom.PF_Medium,
                                              fontSize: setTextSp(10)),
                                        ),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          )
                        : Container()
                  ],
                ),
              );
            }),
      );
    });
  }
}
